<template>
    <div class="white-box">
        <title-more title="数据概览">
            <template #sub>
                <el-popover placement="right-start" title="" :width="700" trigger="hover">
                    <template #reference>
                        <el-icon color="#C1C1C1" :size="18"><QuestionFilled /></el-icon>
                    </template>
                    <template #default>
                        <p class="p-popover">注：实时数据仅供即时运营参考，最终以离线数据为准。</p>
                        <p class="p-popover">在架商品数：统计周期内，已上架的商品数</p>
                        <p class="p-popover">加购件数：统计周期内，点击加入购物车的件数，不考虑后期修改、删除等场景。（按点击加购时间）</p>
                        <p class="p-popover">下单件数：统计周期内，提交订单中的商品件数（按下单时间）</p>
                        <p class="p-popover">付款件数：统计周期内，商品支付成功中的商品件数</p>
                    </template>
                </el-popover>
            </template>
        </title-more>
        <div class="data-prev flexs">
            <div class="data-prev__item">
                <div class="data-prev__tip">在架商品数</div>
                <p class="data-prev__nums">{{ objs.line_good || "0" }}</p>
            </div>
            <div class="data-prev__item">
                <div class="data-prev__tip">加购件数</div>
                <p class="data-prev__nums">{{ objs.cart_good || "0" }}</p>
            </div>
            <div class="data-prev__item">
                <div class="data-prev__tip">下单件数</div>
                <p class="data-prev__nums">{{ objs.pay_good || "0" }}</p>
            </div>
            <div class="data-prev__item">
                <div class="data-prev__tip">付款件数</div>
                <p class="data-prev__nums">{{ objs.moeny_good || "0" }}</p>
            </div>
        </div>
    </div>

    <div class="white-box">
        <title-more title="商品销量">
            <template #sub>
                <el-popover placement="right-start" title="" :width="260" trigger="hover">
                    <template #reference>
                        <el-icon color="#C1C1C1" :size="18"><QuestionFilled /></el-icon>
                    </template>
                    <template #default>
                        <p class="p-popover">默认筛选当天已销售的商品数</p>
                        <p class="p-popover">统计时间：从当天往前推大概一个月</p>
                    </template>
                </el-popover>
            </template>
        </title-more>
        <div class="task-one" style="margin-bottom: 0">
            <div class="task-one__item">
                <span class="task-one__label">选择时间：</span>
                <el-date-picker v-model="area_time" type="date" value-format="YYYY-MM-DD" :disabled-date="disabledDate" placeholder="请选择时间" />
            </div>
            <div class="task-one__btn">
                <el-button type="primary" :loading="search_btn" :icon="Search" @click="handleSearch">查询</el-button>
            </div>
        </div>
        <!-- 在架商品图 -->
        <div class="echars-one__cont">
            <div id="echart-good" class="echart-view"></div>
        </div>
    </div>

    <div class="white-box">
        <title-more title="商品排行榜"></title-more>
        <el-tabs v-model="tabName" type="card" @tab-click="handleTab">
            <el-tab-pane label="销量排行" name="0">
                <el-table
                    class="table-mb"
                    v-loading="loading"
                    :data="arr_data"
                    :header-cell-style="{ background: '#F5F7FA' }"
                    element-loading-background="rgba(255, 255, 255, 0.6)"
                >
                    <el-table-column label="排名" type="index" :index="indexMethod" width="120" />
                    <el-table-column label="商品" min-width="240">
                        <template #default="{ row }">
                            <div class="table-lr">
                                <el-image
                                    class="table-lr__img img-small"
                                    loading="lazy"
                                    :src="proxy.imgUrl + row.product_img"
                                    fit="cover"
                                    v-if="row.product_img"
                                />
                                <div class="table-lr__right small-right">
                                    <p class="lr-user line-one">{{ row.product_name }}</p>
                                    <p>ID：{{ row.product_common_id }}</p>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="sales" label="销量" min-width="180" />
                    <el-table-column prop="level" label="等级" min-width="180" />
                    <el-table-column label="规格" min-width="180">
                        <template #default="{ row }"> {{ row.norm }}/{{ row.unit }} </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="订单排行" name="1">
                <el-table
                    class="table-mb"
                    v-loading="loading"
                    :data="arr_data"
                    :header-cell-style="{ background: '#F5F7FA' }"
                    element-loading-background="rgba(255, 255, 255, 0.6)"
                >
                    <el-table-column label="排名" type="index" :index="indexMethod" width="120" />
                    <el-table-column label="商品" min-width="240">
                        <template #default="{ row }">
                            <div class="table-lr">
                                <el-image
                                    class="table-lr__img img-small"
                                    loading="lazy"
                                    :src="proxy.imgUrl + row.product_img"
                                    fit="cover"
                                    v-if="row.product_img"
                                />
                                <div class="table-lr__right small-right">
                                    <p class="lr-user line-one">{{ row.product_name }}</p>
                                    <p>ID：{{ row.product_common_id }}</p>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="orders" label="订单数" min-width="180" />
                    <el-table-column prop="level" label="等级" min-width="180" />
                    <el-table-column label="规格" min-width="180">
                        <template #default="{ row }"> {{ row.norm }}/{{ row.unit }} </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="库存排行" name="2">
                <el-table
                    class="table-mb"
                    v-loading="loading"
                    :data="arr_data"
                    :header-cell-style="{ background: '#F5F7FA' }"
                    element-loading-background="rgba(255, 255, 255, 0.6)"
                >
                    <el-table-column label="排名" type="index" :index="indexMethod" width="120" />
                    <el-table-column label="商品" min-width="240">
                        <template #default="{ row }">
                            <div class="table-lr">
                                <el-image
                                    class="table-lr__img img-small"
                                    loading="lazy"
                                    :src="proxy.imgUrl + row.product_img"
                                    fit="cover"
                                    v-if="row.product_img"
                                />
                                <div class="table-lr__right small-right">
                                    <p class="lr-user line-one">{{ row.product_name }}</p>
                                    <p>ID：{{ row.product_common_id }}</p>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="sku" label="库存" min-width="180" />
                    <el-table-column prop="level" label="等级" min-width="180" />
                    <el-table-column label="规格" min-width="180">
                        <template #default="{ row }"> {{ row.norm }}/{{ row.unit }} </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
        <el-pagination
            background
            v-model:current-page="page"
            v-model:page-size="pageSize"
            :page-sizes="pageSizeNum"
            :total="totalNums"
            layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
    </div>
    <go-back />
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, watch, onBeforeUnmount } from "vue"
import { Search, QuestionFilled } from "@element-plus/icons-vue"
import TitleMore from "@components/title-more.vue"
import GoBack from "@components/GoBack.vue"
import OneLoad from "@mixins/one-load"

// echarts
import EchartsLine from "@common/echarts-line"

const { proxy } = getCurrentInstance()

onMounted(() => {
    getDataInfo()
    window.onresize = echartResize
})

onBeforeUnmount(() => {
    echartsDispose()
    window.onresize = null
})

// 概况
const objs = ref({
    line_good: 0, //上架商品数
    cart_good: 0, // 加购件数
    pay_good: 0, // 付款件数
    moeny_good: 0, // 下单件数
})
function getDataInfo() {
    proxy.$axios
        .get("analyse/product/tongji")
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data
                objs.value.line_good = result.onsale_count
                objs.value.cart_good = result.cart_count
                objs.value.moeny_good = result.order_pay_count
                objs.value.pay_good = result.order_total_count
                goodEchart()
                getList()
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}

// 筛选
const area_time = ref("")
const search_btn = ref(false)
const handleSearch = () => {
    search_btn.value = true
    echartsDispose()
    getDataInfo()
}

/**
 * 图表
 * @param {Object} echart_good 在架商品
 */
let echart_good = null
function echartResize() {
    echart_good.resize()
}
function echartsDispose() {
    echart_good != null && echart_good.dispose()
    echart_good = null
}

// 销售商品
function goodEchart() {
    echart_good = proxy.$echarts.init(document.getElementById("echart-good"))
    let nums = [],
        xData = []
    proxy.$axios
        .get("analyse/product/sales", {
            params: {
                day: area_time.value,
            },
        })
        .then((res) => {
            search_btn.value = false
            if (res.data.code == 0) {
                let result = res.data.data.product_items
                result.map((item) => {
                    nums.push(item.product_num)
                    xData.push(item.date)
                })
                let series = [
                    {
                        data: nums,
                        type: "line",
                        name: "商品销量",
                        smooth: true,
                        showSymbol: false,
                        areaStyle: {
                            opacity: 1,
                            color: new proxy.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: "rgba(64, 158, 255,0.8)",
                                },
                                {
                                    offset: 1,
                                    color: "rgba(255, 255, 255, 0.3)",
                                },
                            ]),
                        },
                    },
                ]
                let option = EchartsLine(xData, [], series, "6%")
                echart_good.setOption(option)
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {
            search_btn.value = false
        })
}

/**
 * minxin列表加载
 */
const { page, pageSizeNum, pageSize, loading, arr_data, totalNums, pubParams, pubRefreshParams, getdata } = OneLoad()

// 切换每页显示条数
watch(pageSize, (val) => {
    page.value = 1
    pubParams(getList)
})
// 跳转第几页
watch(page, (val) => {
    pubParams(getList)
})

const indexMethod = (index) => {
    return index + 1 + (page.value - 1) * pageSize.value
}
function getList() {
    let params = {
        page: page.value,
        limit: pageSize.value,
    }
    switch (tabName.value) {
        case "0":
            params.order = "sales"
            break
        case "1":
            params.order = "orders"
            break
        default:
            params.order = "sku"
            break
    }
    getdata("analyse/product/rank", params)
}

// tab切换
const tabName = ref("0")
const handleTab = (pane) => {
    tabName.value = String(pane.index)
    pubRefreshParams(getList)
}

const disabledDate = (time) => {
    return time.getTime() > Date.now()
}
</script>
<script>
export default {
    name: "GoodsAnalytics",
}
</script>

<style lang="less" scoped>
.echars-one__cont {
    margin-top: @margin-xl;
}
.echart-view {
    width: 100%;
    height: 340px;
}

.p-popover {
    font-size: @font-size-md;
    color: #595961;
    margin: @margin-xs 0px;
}
.data-prev {
    .data-prev__item {
        width: 24%;
        padding: @padding-mdl;
        overflow: hidden;
        border-radius: 10px;
        .data-prev__tip {
            margin-bottom: @margin-md;
            color: @gray-6;
        }
        .data-prev__nums {
            font-size: 26px;
            color: #111;
        }
        &:hover {
            background-color: #f4f8ff;
        }
        .data-prev__ratio {
            margin-top: @margin-base;
            color: @gray-6;
            .ratio-nums {
                color: @red;
                margin-left: -6px;
            }
        }
    }
}
:deep(.el-tabs) {
    .el-tabs__header {
        box-sizing: content-box;
    }
    .el-tabs__item {
        background: #f7f8fa;
        border-bottom: 1px solid #e4e7ed;
        &.is-active {
            color: #303133;
            background: #fff;
        }
    }
}
</style>
